{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Fluid 16 Responsive Grid{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/34gs_col.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/screen_size.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationtools/js/cell.js') }}" type="text/javascript"></script>
    {# Pomiar rozdzielczości i wyświetlenie w <div id="width">
        <script type="text/javascript">
            $(document).ready( function(){ 
                    $('#width').text($(window).width());
                    $(window).on('resize',function() {
                        $('#width').text($(window).width());
                    });
            });
        </script>
    #}
    {# Ustawienie display:none dla <div id="chat-frame-container"> dla mobilnych przeglądarek
        <script type="text/javascript">

            $(document).ready( function(){ 

                function detectmob() {
                    if( navigator.userAgent.match(/Android/i)
                     || navigator.userAgent.match(/webOS/i)
                     || navigator.userAgent.match(/iPhone/i)
                     || navigator.userAgent.match(/iPad/i)
                     || navigator.userAgent.match(/iPod/i)
                     || navigator.userAgent.match(/BlackBerry/i)
                     || navigator.userAgent.match(/Windows Phone/i)
                     ){
                        alert('This be a mobile browser');
                        $("#chat-frame-container").css( "display", "none" );
                    }
                    }detectmob();
            });
        </script>
    #}
{% endblock %}

{% block body %}

<div class="grid_row">
    <div class="grid_12">
        <h4>Fluid 16 Responsive Grid</h4>
        <h5 id="console"></h5>
    </div>
    <div class="clear"></div>
</div>

<div id="grid" class="grid_row">
    <div class="grid_8">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_8">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>

    <div class="grid_8">
        <div class="row">
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
        </div>
    </div>
    <div class="grid_8">
        <div class="row">
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
        </div>
    </div>
    <div class="clear"></div>

    <div class="grid_6">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_10">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>

    <div class="grid_6">
        <div class="container">
            <div class="row">
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            </div>
        </div>
    </div>
    <div class="grid_10">
        <div class="container">
            <div class="row">
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_4 example-block"><div class="cell">col_4 - <span class="dynamic-px-width"></span></div></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <div class="grid_12 prefix_2 suffix_2">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></div></p>
        </div>
    </div>
    <div class="clear"></div>

    <div class="grid_12 prefix_2 suffix_2">
        <div class="container">
            <div class="row">
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
                <div class="col_6 example-block"><div class="cell">col_6 - <span class="dynamic-px-width"></span></div></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

{% endblock %}